<template>
  <van-popup v-model:show="visible" v-bind="$attrs" position="bottom" :style="style" round class="de-per-picker">
    <div class="h-100 flex-col">
      <slot name="header" :searchForm="searchForm">
        <div class="text-c py-20">{{ props.title }}</div>
      </slot>
      <slot>
        <div class="flex-1 overflow-y px-15">
          <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh(props.request, {...props.queryParams, ...searchForm }, !!props.pagination)"
          >
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="LoadPage(props.request, {...props.queryParams, ...searchForm })"
            >
              <van-radio-group v-if="!props.multiple" v-model="checked">
                <van-cell-group>
                  <van-swipe-cell v-for="item in list" :key="item.id">
                    <van-cell clickable @click="checked = item[props.config.valueKey]" :border="false" class="as px-0">
                      <template #default>
                        <div class="cell-cont flex-row-c">
                          <div class="cell-left flex-row-sa">
                            <van-radio :name="item[props.config.valueKey]" />
                          </div>

                          <div class="cell-right rc flex-1 ml-10">
                            <slot name="listItem" :scope="item">
<!--                              <div class="value text-l">{{ item[props.config.viewKey] }}</div>-->
                              <div class="value text-l">123</div>
                            </slot>
                          </div>
                        </div>
                      </template>
                    </van-cell>
                  </van-swipe-cell>
                </van-cell-group>
              </van-radio-group>

              <van-checkbox-group v-else v-model="checked_">
                <van-cell-group>
                  <van-swipe-cell v-for="(item, index) in list" :key="item.id">
                    <van-cell clickable @click="toggle(index)" :border="false" class="as px-0">
                      <template #default>
                        <div class="cell-cont flex-row-c">
                          <div class="cell-left flex-row-sa">
                            <van-checkbox :ref="el => (checkboxRefs[index] = el)" :name="item[props.config.valueKey]" />
                          </div>

                          <div class="cell-right flex-1 ml-10">
                            <div class="value text-l">{{ item[props.config.viewKey] }}</div>
                          </div>
                        </div>
                      </template>
                    </van-cell>
                  </van-swipe-cell>
                </van-cell-group>
              </van-checkbox-group>
            </van-list>
          </van-pull-refresh>
        </div>
      </slot>
      <slot name="footer">
        <div class="footer-bar flex-row">
          <van-button square block @click="onClose">关闭</van-button>
          <!-- :disabled="!checkedPerson" -->
          <van-button square type="primary" :disabled="disabled" block @click="onConfirm">确定</van-button>
        </div>
      </slot>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, watch, useAttrs, computed, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRequestList } from '@/mixins/useRequestList';
/**
 * 仓库
 */
import useStore from '@/store/index';
import { storeToRefs } from 'pinia';

const { REQUSET_LIST, onRefresh, onLoadList, onLoadListPage } = useRequestList();
const { loading, finished, refreshing, list, page: pagination } = toRefs(REQUSET_LIST);

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '请选择'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 10
    })
  },
  style: {
    type: Object,
    default: () => ({})
  },
  request: {
    type: Function,
    default: () => null
  },
  config: {
    type: Object,
    default: () => ({
      valueKey: 'id',
      viewKey: 'name'
    })
  },
  queryParams: {
    type: Object,
    default: () => ({})
  }
});

const checked = ref('');
const searchForm = ref({
  test: '1'
});
const checkedPerson = computed(() => {
  return list.value.find(o => o[props.config.valueKey] === checked.value);
});

const checked_ = ref([]);
const checkedPersons = computed(() => {
  return list.value.filter(o => checked_.value.includes(o[props.config.valueKey])) || [];
});
const checkboxRefs = ref([]);
const disabled = computed(() => {
  if (!props.multiple) {
    return !checkedPerson.value;
  }
  return !checkedPersons.value.length;
});

const emit = defineEmits(['update:modelValue', 'onConfirm']);
const LoadPage = computed(() => {
  return props.pagination ? onLoadListPage : onLoadList;
});
const visible = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val);
  }
});

watch(
  () => visible.value,
  val => {
    if (!!val) {
      checked.value = '';
      checked_.value = [];
      onRefresh(props.request, {...props.queryParams, ...searchForm.value }, !!props.pagination);
    }
  },
  {
    immediate: true
  }
);

function toggle(index) {
  checkboxRefs.value[index].toggle();
}

function onConfirm() {
  emit('onConfirm', props.multiple ? checkedPersons.value : checkedPerson.value);
  emit('update:modelValue', false);
}

function onClose() {
  emit('update:modelValue', false);
}

function onSearch() {
  onRefresh(props.request, {...props.queryParams, ...searchForm.value }, !!props.pagination);
}

defineExpose({
  onSearch,
});
</script>
<style scoped lang="scss">
.de-per-picker {
  height: 70%;
  width: 100vw;
}
</style>
